/* eslint no-unused-expressions: 0 */
import React, { Component } from 'react';
import { Dialog, Input, Select, Grid, Radio, Search, Menu, Button } from '@alifd/next';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import DialogDecorator from './DialogDecorator';

const { Col, Row } = Grid;

class InspectionRecordDialog extends Component {
  constructor(props) {
    super(props);

    this.state = {
      visible: props.visible,
      value: props.value,
    };
  }

  /**
   * @param value
   */
  onFormChange = (value) => {
    value.equipmentname = this.state.value.equipmentname;
    this.setState({
      value,
    })
  };

  onOkHandler = () => {
    let value = this.state.value;
    this.refs.form.validateAll((errors, values) => {
      if (errors || !this.state.value.equipmentname) {
        console.log('errors', errors);
        return;
      }
      value.records.push({
        equipmentName: this.state.value.equipmentname,
        equipmentState: this.state.value.equipmentState,
      });
      this.props.onOk && this.props.onOk(value);
    });
  };

  onSearchChange(equipmentname) {
    let value = this.state.value;
    value.equipmentname = equipmentname;
    this.setState({
      value,
    })
  }

  /**
   * 强行将数组转成表单能够识别的对象：{ equipment/0: "正常", equipment/1: "故障" }
   */
  componentDidMount() {
    let value = this.state.value;
    value.equipmentname = this.state.value.records[0] ?  this.state.value.records[0].equipmentName : '';
    value.equipmentState = this.state.value.records[0] ? this.state.value.records[0].equipmentState : null;
    this.setState({
      value,
    })
  }

  render() {
    const dataSource = this.props.value.equipmentList.map((ele, idx) => {
      return {
        value: ele.equipmentname,
        label: ele.equipmentname,
      }
    });
    return (
      <Dialog
        title="编辑数据"
        onClose={this.props.onClose}
        onCancel={this.props.onCancel}
        afterClose={this.props.afterClose}
        onOk={this.onOkHandler}
        visible={this.state.visible}
        style={{ width: 400 }}
      >
        <IceFormBinderWrapper
          value={this.state.value}
          onChange={this.onFormChange}
          ref="form"
        >
          <div>
            <Row style={styles.row}>
            <Col span={8}>
              <span style={styles.label}>设备名</span>
            </Col>
            <Col span={16}>
              <Search
                shape='simple'
                style={{ width: 200 }}
                dataSource={dataSource}
                value={this.state.value.equipmentname}
                onChange={this.onSearchChange.bind(this)}
              />
            </Col>
          </Row>
            <Row style={styles.row}>
            <Col span={8}>
              <span style={styles.label}>设备状态</span>
            </Col>
            <Col span={16}>
              <IceFormBinder
                required
                name='equipmentState'
                message="必选"
              >
                <Radio.Group style={styles.RadioItem}>
                  <Radio value="正常">正常</Radio>
                  <Radio value="故障">故障</Radio>
                  <Radio value="/">/</Radio>
                </Radio.Group>
              </IceFormBinder>
            </Col>
          </Row>
          </div>
        </IceFormBinderWrapper>
      </Dialog>
    );
  }
}

const styles = {
  row: {
    marginTop: '10px',
  },
  label: {
    lineHeight: '30px',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    width: '100px',
    display: 'inline-block',
    overflow: 'hidden',
  },
  formField: {
    width: '100%',
  },
  RadioItem: {
    lineHeight: '30px',
  }
};

export default DialogDecorator(InspectionRecordDialog);
